<template>
	<view class="content">
		<text class="time-style">{{time.substring(0,10)}}</text>
		<text class="time-style">{{time.substring(11,16)}}</text>
		<image class="picture-style" :src='picUrl' mode="aspectFill" @click="clickImg(picUrl)"></image>
		<text class="title">{{title}}</text>
		<text class="kalori">卡路里：
			<text class="kalori-value">{{value}}+</text>
		</text>

	</view>
</template>

<script setup>
	
 	const props =defineProps({
		title: String,
		value: Number,
		picUrl: String,
		time: String
	})
	// yanqiuyue
	const clickImg = (e)=>{
		wx.previewImage({
			urls:[e]
		})
	}
  	
	
</script>

<style>
	.kalori-value{
		color: firebrick;
		font-size: 47rpx;
		font-weight: bold;
	}
	.title {
		margin-left: 20rpx;
		font-size: 77rpx;
		font-family: 'Times New Roman', Times, serif;
		font-weight: bold;
		margin-top: 20rpx;
		
	}

	.kalori {
		margin-left: 20rpx;
		font-size: 37rpx;
		margin-top: 20rpx;
	}

	.time-style {
		 
		font-size: 30rpx;
		padding:5rpx 20rpx;
		text-align: center;
	}

	.picture-style {
		width: 100%;
		height: 400rpx;
		
	}

	.content {
		/* background: lavender; */
		width: 1;
		/* border: 1px solid black; */
		display: flex;
		flex-direction: column;
		/* margin: 30rpx 0 30rpx 0; */
		margin-top: 20rpx;
		 

	}
</style>